<template>
  <scroll-view class="container" scroll-y>
    <!-- Banner轮播 -->
    <BannerSwiper 
      :banners="banners"
      @change="onBannerChange"
      @loaded="onBannerLoaded"
      @error="onBannerError"
    />

    <!-- 顶部操作按钮 -->
    <TopActionButtons :items="topActions" @action="handleTopAction" @openMap="openMap" @share="share"
      @goReserve="goReserve" />

    <uni-card spacing="0" padding="20rpx" margin="20rpx">
      <!-- 标题与地址 -->
      <view>
        <text class="name">{{ detail.warehouseName || '-' }}</text>
        <view class="addr-row" style="margin-top: 8rpx;">
          <image src="/static/assets/sourceInfo/source-icon-location.png" class="addr-icon" style="width: 18rpx;height: 25rpx;"/>
          <text class="addr-text">{{ detail.address || '-' }}</text>
        </view>
      </view>
      <!-- 价格与招租面积 -->
      <view class="price-row" style="margin-top: 16rpx;">
        <view class="price" v-if="detail.rentalPrice">{{ detail.rentalPrice }}元/m²/天
        <span style="font-size: 20rpx; color: #3F3F3FAA;font-weight: regular;">起(具体面议)</span>
        </view>
        <view class="price" v-else>-- 元/m²/天
        <span style="font-size: 20rpx; color: #3F3F3FAA;font-weight: regular;">起(具体面议)</span>
        </view>
        <text class="lease-area">招租面积：{{ formatArea(detail.areaSize) }}</text>
      </view>
    </uni-card>

    <!-- 园区规模 -->
   <uni-card spacing="0" padding="20rpx" margin="20rpx">
      <view class="card-header">
        <image src="/static/assets/sourceInfo/source-icon-park.png" class="addr-icon" style="width: 19rpx;height: 22rpx;"/>
        <text class="card-title">园区规模</text>
      </view>
      <view class="grid grid-2">
        <view class="grid-item">
          <text class="grid-label">可出租面积</text>
          <text class="grid-value">
            {{ detail.parkInfo && detail.parkInfo.totalArea ? formatArea(detail.parkInfo.totalArea) : '-' }}
          </text>
        </view>
        <view class="grid-item">
          <text class="grid-label">建筑面积</text>
          <text class="grid-value">
            {{ detail.parkInfo && detail.parkInfo.rentedArea ? formatArea(detail.parkInfo.rentedArea) : '-' }}
          </text>
        </view>
        <view class="grid-item">
          <text class="grid-label">仓库类型</text>
          <text class="grid-value">
            {{ detail.warehouseType?.typeName || '-' }}
          </text>
        </view>
        <view class="grid-item">
          <text class="grid-label">层高</text>
          <text class="grid-value">
            {{ detail.floorHeight || '-' }}
          </text>
        </view>
      </view>
   </uni-card>

    <!-- VR全景看仓 -->
 <uni-card spacing="0" padding="20rpx" margin="20rpx">
    <view class="card-header">
      <image src="/static/assets/sourceInfo/source-icon-vr.png" style="width: 24rpx;height: 14rpx;" class="addr-icon" />
      <text class="card-title">VR全景看仓</text>
    </view>
      <view class="vr-preview" @tap="openVr">
        <image class="vr-cover" :src="detail.thumbnailUrl" mode="aspectFill" />
        <view class="vr-badge">
          <image class="vr-badge-icon" src="/static/assets/sourceInfo/source-icon-vrplay.png" />
          <text class="vr-badge-text">360°全景体验</text>
          <view class="vr-hint">驾临其境查看仓库</view>
        </view>
        
      </view>
      <view class="vr-tips">
         <image class="vr-tips-icon" src="/static/assets/sourceInfo/source-icon-tips.png" mode="aspectFill" />
         <view class="vr-support">支持手机、电脑、VR设备浏览</view>
      </view>

 </uni-card>

    <!-- 库房详情 -->
 <uni-card spacing="0" padding="20rpx" margin="20rpx">
    <view class="card-header">
      <image src="/static/assets/sourceInfo/source-icon-winfo.png" class="addr-icon" style="width: 22rpx;height: 23rpx;"/>
      <text class="card-title">库房详情</text>
    </view>
      <view class="detail-grid">
        <view class="grid-item">
          <text class="detail-label">招租面积</text>
          <text class="detail-value">{{ detail.areaSize }}m²</text>
        </view>
        <view class="grid-item">
          <text class="detail-label">地面承重</text>
          <text class="detail-value">{{ detail.floorLoad || '-' }}</text>
        </view>
        <view class="grid-item">
          <text class="detail-label">月台数量</text>
          <text class="detail-value">{{ detail.platformCount || '-' }}</text>
        </view>
        <view class="grid-item">
          <text class="detail-label">装卸设备</text>
          <text class="detail-value">{{ detail.equipmentConfig || '-' }}</text>
        </view>
      </view>
 </uni-card>

    <!-- 硬件配置 -->
      <uni-card spacing="0" padding="20rpx" margin="20rpx">
    <view class="card-header">
      <image src="/static/assets/sourceInfo/source-icon-config.png" class="addr-icon" style="width: 29rpx;height: 29rpx;"/>
      <text class="card-title">硬件配置</text>
    </view>
      <view class="feature-list" v-if="detail.hardwareConfig">
        <view v-if="detail.hardwareConfig" v-for="(f, i) in detail.hardwareConfig.split(',')" :key="i" class="feature-item">
          <view class="check-icon"></view>
          <text class="feature-text">{{ f }}</text>
        </view>
      </view>
      <view class="feature-list" v-else>
        <text class="feature-text">暂无硬件配置</text>
      </view>
    </uni-card>

    <!-- 消防与安全 -->
  <uni-card spacing="0" padding="20rpx" margin="20rpx">
    <view class="card-header">
      <image src="/static/assets/sourceInfo/source-icon-a.png" class="addr-icon" style="width: 21rpx;height: 27rpx;"/>
      <text class="card-title">消防与安全</text>
    </view>
    <view class="safety-grid">
     <view class="safety-grid-left">
          <text class="safety-label">消防等级</text>
          <text class="safety-label">消防设施</text>
          <!-- <text class="safety-label">安保</text> -->
      </view>
        <view style="margin: 0 16rpx; height: 100%; width: 2rpx; background: #AEAEAE;"/>
        <view class="safety-grid-right">
          <text class="safety-value">{{ detail.fireLevel || '-' }}</text>
          <text class="safety-value">{{ detail.fireFacilities || '-' }}</text>
          <!-- <text class="safety-value">{{ detail.security || '-' }}</text> -->
      </view>
    </view>
     
    </uni-card>

    <!-- 增值服务 -->
       <uni-card spacing="0" padding="20rpx" margin="20rpx">
    <view class="card-header">
      <image src="/static/assets/sourceInfo/source-icon-service.png" class="addr-icon" style="width: 28rpx;height: 23rpx;"/>
      <text class="card-title">增值服务</text>
    </view> 
      <view class="service-list" v-if="detail.additionalServices">
        <view v-if="detail.additionalServices" v-for="(s, i) in detail.additionalServices.split(',')" :key="i" class="service-item">
          <view class="check-icon red"></view>
          <text class="service-text">{{ s }}</text>
        </view>
      </view>
      <view class="service-list" v-else>
        <text class="service-text">暂无增值服务</text>
      </view>
    </uni-card>

    <!-- 地址 -->
     <uni-card spacing="0" padding="20rpx" margin="20rpx">
    <view class="card-header">
      <image src="/static/assets/sourceInfo/source-icon-location.png" class="addr-icon" style="width: 26rpx;height: 26rpx;"/>
      <text class="card-title">地址</text>
    </view>
      <view class="address-block">
        <text class="address-main">{{ detail.address || '-' }}</text>
        <view class="distance-list">
          <text v-if="detail.addressDesc" v-for="(d, i) in detail.addressDesc.split(',')" :key="i" class="distance-item">· {{ d }}</text>
        </view>
      </view>
    </uni-card>
    <view class="appointment-form" v-if="!isHidenReserve">
      <AppointmentForm 
        :warehouseId="id" 
        @appointmentSuccess="handleAppointmentSuccess"
        @cancelPppointment="handleCancelAppointment"
        @hasAppointment="handleHasAppointment"
      />
    </view>

    <!-- 底部操作按钮 -->
    <BottomActionButtons 
      :items="bottomActions"
      :primaryItem="primaryAction"
      @action="handleBottomAction"
      @toggleFavorite="handleFavoriteChange"
    />

    <!-- 海报弹窗 -->
    <PosterModal 
      :visible="showPosterModal"
      type="warehouse"
      :data="detail"
      @close="showPosterModal = false"
      @book="handleBookFromPoster"
      @saved="handlePosterSaved"
    />

  </scroll-view>
</template>
<script>
import BannerSwiper from '@/components/BannerSwiper.vue';
import { API } from '@/utils/api.js';
import { processImageUrls } from '@/utils/url-helper.js'
import TopActionButtons from '@/components/TopActionButtons.vue'
import AppointmentForm from '@/components/AppointmentForm.vue'
import BottomActionButtons from '@/components/BottomActionButtons.vue'
import PosterModal from '@/components/PosterModal.vue'
export default {
  components: {
    BannerSwiper,
    TopActionButtons,
    AppointmentForm,
    BottomActionButtons,
    PosterModal
  },
  data() {
    return {
      id: null,
      banners: [],
      detail: {
        
      },
      features: [],
      services: [],
      distances: [],
      token: uni.getStorageSync('user-token'),
      vrCover: '',
      bannerCurrentIndex: 0,
      isHidenReserve: false,
      isFavoriteLoading: false, // 收藏操作加载状态
      isNavigating: false, // 防止重复跳转
      showPosterModal: false, // 控制海报弹窗显示
      topActions: [
        {
          icon: '/static/assets/sourceInfo/source-action-location.png',
          title: '一键导航',
           sub: '约15分钟',
          event: 'openMap'
        },
        {
          icon: '/static/assets/sourceInfo/source-action-share.png',
          title: '一键分享',
           sub: '微信好友',
          event: 'share',
          openType: 'share'
        },
        {
          icon: '/static/assets/sourceInfo/source-action-subs.png',
          title: '预约看仓',
          sub: '今日可约',
          primary: true,
          event: 'goReserve',
          disabled: false
        }
      ],
             bottomActions: [
         {
           icon: '/static/assets/sourceInfo/source-bottom-location.png',
           title: '导航',
           event: 'openMap'
         },
         {
           icon: '/static/assets/sourceInfo/source-bottom-share.png',
           title: '海报',
           event: 'sharePoster'
         },
         {
           icon: '/static/assets/sourceInfo/source-bottom-favorite.png',
           title: '收藏',
           event: 'toggleFavorite',
           isFavorited: false,
           warehouseId: null,
           loading: false
         }
       ],
       primaryAction: {
         icon: '/static/assets/sourceInfo/source-bottom-phone.png',
         title: '联系客服',
         event: 'contactService',
         disabled: false
       }
    }
  },
  onLoad(options) {
    const rawId = options?.id;
    const id = typeof rawId === 'string' ? decodeURIComponent(rawId) : rawId;
    if (id !== undefined && id !== null && id !== '' && id !== 'undefined' && id !== 'null') {
      this.id = id;
      this.fetchDetail();
      // this.fetchBanners(); // 新增：加载banner
    } else {
      uni.showToast({ title: '无效的仓库ID', icon: 'none' });
    }
    if (options.isHidenReserve) {
      this.isHidenReserve = options.isHidenReserve
    }
    
  },
  
  onShow() {
    // 页面显示时检查收藏状态
    if (this.id) {
      // 检查今天是否可以预约
      // this.checkTodayAppointment();
      // 检查收藏状态
      // this.checkFavoriteStatus(); 
    }
  },
  onShareAppMessage(res) {
    console.log("onShareAppMessage", res);
    return {
      title: '百联物流',
      path: '/pages/warehouse/warehouseDetail?id=' + this.id,
      imageUrl: '/static/sourceInfo/source-bottom-share.png'
    }
  },
  onShareTimeline(res) {
    console.log("onShareTimeline", res);
  },
  methods: {
    async fetchDetail() {
      try {
        if (!this.id) return;
        const res = await API.warehouse.getDetail(this.id);
        console.log("res", res);
        this.detail = processImageUrls(res);
        console.log("this.detail", this.detail);
        this.fetchBanners(this.detail.bannerPage)
   
      } catch (e) {
        console.error('获取仓库详情失败', e);
      }
    },

    // 新增：获取banner接口并适配
    async fetchBanners(page) {
      try {
        const res = await API.banner.getList({ bannerPage: page });
        this.banners = processImageUrls(res)
      } catch (e) {
        console.error('获取banner失败', e);
        this.banners = [];
      }
    },

    formatArea(val) {
      if (!val && val !== 0) return '-';
      const num = Number(val);
      if (Number.isNaN(num)) return String(val);
      if (num >= 10000) return Math.round(num) + 'm²';
      return num + 'm²';
    },

    openMap() {
      if (!this.detail.parkInfo.latitude || !this.detail.parkInfo.longitude) {
        uni.showToast({ title: '暂无地址信息及经纬度位置信息，请电话联系', icon: 'none' });
        return;
      }
      const latitude = this.detail.parkInfo.latitude ;
      const longitude = this.detail.parkInfo.longitude;
      console.log("latitude", latitude);
      console.log("longitude", longitude);
      uni.openLocation({
        latitude: longitude,
        longitude: latitude,
        name: this.detail.warehouseName,
        address: this.detail.address
      });
    },

    share() {
      // #ifdef MP-WEIXIN
      uni.showShareMenu && uni.showShareMenu({
        withShareTicket: true,
        title:this.detail.name,
        path: '/pages/warehouse/warehouseDetail?id=' + this.id,
        shareTypes:'normal,wx_friends,wx_moments',
        menus: ['shareAppMessage', 'shareTimeline']
      });
      // #endif
    },
    
    // 新增：分享海报功能
    sharePoster() {
      this.showPosterModal = true
    },
    
    goReserve() {
      if (!this.id) {
        uni.showToast({ title: '缺少仓库ID', icon: 'none' });
        return;
      }
      
      // 防止重复点击
      if (this.isNavigating) {
        return;
      }
      this.isNavigating = true;
      
      // 直接跳转到预约页面
      uni.navigateTo({ 
        url: '/pages/reserve/reserve?warehouseId=' + encodeURIComponent(this.id),
        success: () => {
          console.log('跳转成功')
        },
        fail: (err) => {
          console.error('跳转失败:', err)
          // 跳转失败时重置状态
          this.isNavigating = false;
        }
      });
      
      // 延迟重置状态，避免快速连续点击
      setTimeout(() => {
        this.isNavigating = false;
      }, 1000);
    },
    openVr() {
      if (this.detail.vrLink) {
        uni.navigateTo({ url: `/pages/webview/webview?url=${encodeURIComponent(this.detail.vrLink)}` });
      } else {
        uni.showToast({ title: '暂无VR链接', icon: 'none' });
      }
    },
    openAllVr() {
      this.openVr();
    },

    onBannerChange(e) {
      this.bannerCurrentIndex = e.current;
    },
    onBannerLoaded() { },
    onBannerError(errorData) {
      const message = errorData.type === 'video' ? '视频加载失败' : '图片加载失败';
      uni.showToast({ title: message, icon: 'none', duration: 2000 });
    },
    handleTopAction(payload) {
      const evt = payload && payload.item && payload.item.event;
      if (evt && typeof this[evt] === 'function') {
        // 对于跳转操作，添加防重复点击保护
        if (evt === 'goReserve' && this.isNavigating) {
          return;
        }
        this[evt]();
      }
    },
    handleAppointmentSuccess() {
      uni.showToast({ title: '预约成功', icon: 'none' });
    },
    handleCancelAppointment() {
      uni.showToast({ title: '取消预约', icon: 'none' });
    },
    handleHasAppointment(hasAppointment) {
      this.hasAppointment = hasAppointment;
      this.topActions[2].sub = hasAppointment ? "今日可约":"本仓库已预约";
    },
    
    // 检查今天是否可以预约并更新UI
    async checkTodayAppointment() {
      if (!this.id) return;
      
      try {
        // 判断今天是否为周六或周日
        const today = new Date();
        const day = today.getDay(); // 0:周日, 6:周六
        if (day === 0 || day === 6) {
          // 周六周日不可预约
          this.topActions[2].sub = "今日不可约";
          this.topActions[2].disabled = true;
          this.primaryAction.title = "今日不可约";
          this.primaryAction.disabled = true;
          return;
        }
        const checkRes = !(day === 0 || day === 6)
        console.log("检查今天预约状态:", checkRes)
        
        if (checkRes) {
          // 更新顶部预约按钮状态
          if (!checkRes) {
            this.topActions[2].sub = "今日不可约";
            this.topActions[2].disabled = true;
          } else {
            this.topActions[2].sub = "今日可约";
            this.topActions[2].disabled = false;
          }
        }
      } catch (error) {
        console.error('检查今天预约状态失败:', error)
        // 检查失败时，保持默认状态
        this.topActions[2].sub = "今日可约";
        this.topActions[2].disabled = false;
        this.primaryAction.title = "联系客服";
        this.primaryAction.disabled = false;
      }
    },
    
    // 检查收藏状态
    async checkFavoriteStatus() {
      console.log('=== 检查收藏状态 ===');
      console.log('当前仓库ID:', this.id);
      console.log('当前token:', this.token);
      
      if (!this.id) {
        console.log('缺少仓库ID，跳过检查');
        return;
      }
      
      try {
        if (!this.token) {
          console.log('用户未登录，设置默认状态');
          // 用户未登录，设置默认状态
          const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
          if (favoriteAction) {
            favoriteAction.isFavorited = false;
            favoriteAction.warehouseId = this.id;
            console.log('设置默认收藏状态，warehouseId:', favoriteAction.warehouseId);
          }
          return;
        }
        
        console.log('开始调用API检查收藏状态...');
        const response = await API.favorite.check({ 
          contentId: this.id,
          contentType: 1
        });
        
        console.log('收藏状态检查响应:', response);
        
        if (response) {
          console.log('更新收藏按钮状态');
          // 更新收藏按钮状态
          const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
          if (favoriteAction) {
            favoriteAction.isFavorited = response.isFavorited || false;
            favoriteAction.warehouseId = this.id;
            console.log('更新收藏状态:', favoriteAction.isFavorited, 'warehouseId:', favoriteAction.warehouseId);
          }
        } else {
          throw new Error(response?.message || '获取收藏状态失败');
        }
      } catch (error) {
        console.error('检查收藏状态失败:', error);
        // 检查失败时，设置默认状态
        const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
        if (favoriteAction) {
          favoriteAction.isFavorited = false;
          favoriteAction.warehouseId = this.id;
          console.log('设置默认收藏状态，warehouseId:', favoriteAction.warehouseId);
        }
        
        // 如果是网络错误，显示提示
        if (error.message.includes('网络') || error.message.includes('timeout')) {
          console.log('网络异常，收藏状态可能不准确');
        }
      }
    },
    handleBottomAction(payload) {
      const evt = payload && payload.item && payload.item.event;
      if (evt && typeof this[evt] === 'function') {
        this[evt]();
      }
    },
    toggleFavorite() {
      // 获取当前收藏状态
      const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
      if (!favoriteAction) return;
      
      // 获取仓库ID
      const warehouseId = favoriteAction.warehouseId || this.id;
      if (!warehouseId) {
        uni.showToast({ title: '缺少仓库ID', icon: 'none' });
        return;
      }
      
      // 计算新的收藏状态
      const newFavoritedState = !favoriteAction.isFavorited;
      
      console.log('切换收藏状态:', { warehouseId, currentState: favoriteAction.isFavorited, newState: newFavoritedState });
      
      // 调用接口更新收藏状态
      this.updateFavoriteStatus(warehouseId, newFavoritedState);
    },
    contactService() {
      // uni.showToast({ title: '联系客服', icon: 'none' });
      uni.makePhoneCall({
        phoneNumber: '021-31575228'
      })
    },
    handleFavoriteChange(payload) {
      console.log('=== 收藏事件触发 ===');
      console.log('完整payload:', payload);
      
      const { warehouseId, isFavorited } = payload;
      
      console.log('收藏状态变化:', { warehouseId, isFavorited });
      console.log('当前token:', this.token);
      console.log('当前仓库ID:', this.id);
      
      // 调用收藏/取消收藏接口
      this.updateFavoriteStatus(this.id, isFavorited);
    },
    
    // 更新收藏状态
    async updateFavoriteStatus(warehouseId, isFavorited) {
      console.log('=== 开始更新收藏状态 ===');
      console.log('参数:', { warehouseId, isFavorited });
      console.log('当前加载状态:', this.isFavoriteLoading);
      
      if (!warehouseId) {
        console.error('缺少仓库ID');
        return;
      }
      
      // 防止重复操作
      if (this.isFavoriteLoading) {
        console.log('正在处理中，忽略重复请求');
        return;
      }
      
      console.log('设置加载状态为true');
      this.isFavoriteLoading = true;
      
      // 更新按钮加载状态
      const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
      if (favoriteAction) {
        favoriteAction.loading = true;
        console.log('按钮加载状态已设置');
      }
      
      try {
        if (isFavorited) {
          console.log('准备添加收藏...');
          // 添加收藏
          if (!this.token) {
            console.error('用户未登录');
            uni.showToast({ 
              title: '请先登录', 
              icon: 'none',
              duration: 2000
            });
            return;
          }
          
          // 构建收藏参数
          const favoriteParams = {
            contentId: warehouseId,
            contentType: 1, // 1表示仓库类型
            title: this.detail?.warehouseName || '仓库',
            desc: this.detail?.warehouseType?.typeName || '仓库',
            status: 'active'
          };
          
          console.log('添加收藏参数:', favoriteParams);
          
          console.log('开始调用API.favorite.add...');
          const response = await API.favorite.add(favoriteParams);
          console.log('API.favorite.add响应:', response);
          
          if (response && response.code === 200) {
            console.log('收藏成功，更新本地状态');
            // 更新本地状态
            const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
            if (favoriteAction) {
              favoriteAction.isFavorited = true;
              favoriteAction.warehouseId = warehouseId;
              console.log('本地状态已更新');
            }
            
            // 强制更新组件
            this.$forceUpdate();
            
            uni.showToast({ 
              title: '收藏成功', 
              icon: 'success',
              duration: 1500
            });
          } else {
            console.error('收藏失败，响应码:', response?.code, '消息:', response?.message);
            throw new Error(response?.message || '收藏失败');
          }
        } else {
          console.log('准备取消收藏...');
          // 取消收藏
          if (!this.token) {
            console.error('用户未登录');
            uni.showToast({ 
              title: '请先登录', 
              icon: 'none',
              duration: 2000
            });
            return;
          }
          
          // 构建取消收藏参数
          const cancelParams = {
            contentId: warehouseId,
            contentType: 1, // 1表示仓库类型
            status: 'inactive'
          };  
          
          console.log('取消收藏参数:', cancelParams);
          
          console.log('开始调用API.favorite.cancel...');
          const response = await API.favorite.cancel(cancelParams);
          console.log('API.favorite.cancel响应:', response);
          
          if (response && response.code === 200) {
            console.log('取消收藏成功，更新本地状态');
            // 更新本地状态
            const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
            if (favoriteAction) {
              favoriteAction.isFavorited = false;
              favoriteAction.warehouseId = warehouseId;
              console.log('本地状态已更新');
            }
            
            // 强制更新组件
            this.$forceUpdate();
            
            uni.showToast({ 
              title: '已取消收藏', 
              icon: 'none',
              duration: 1500
            });
          } else {
            console.error('取消收藏失败，响应码:', response?.code, '消息:', response?.message);
            throw new Error(response?.message || '取消收藏失败');
          }
        }
      } catch (error) {
        console.error('收藏操作失败:', error);
        
        // 操作失败时，回滚状态
        const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
        if (favoriteAction) {
          favoriteAction.isFavorited = !isFavorited;
          console.log('回滚收藏状态到:', favoriteAction.isFavorited);
        }
        
        // 显示错误提示
        uni.showToast({ 
          title: error.message || '操作失败，请重试', 
          icon: 'none',
          duration: 2000
        });
      } finally {
        // 重置加载状态
        this.isFavoriteLoading = false;
        // 重置按钮加载状态
        const favoriteAction = this.bottomActions.find(item => item.event === 'toggleFavorite');
        if (favoriteAction) {
          favoriteAction.loading = false;
        }
      }
    },
    
    // 从海报弹窗处理预约
    handleBookFromPoster() {
      // 跳转到预约页面
      this.goReserve()
    },
    
    // 海报保存成功
    handlePosterSaved() {
      uni.showToast({
        title: '海报已保存到相册',
        icon: 'success'
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  background: #ffffff;
  min-height: 100vh;
  padding: 0rpx 0rpx 140rpx 0rpx;
}

.uni-card {
	padding: 0rpx !important;

	:deep(.uni-card__content) {
		padding: 0rpx !important;
	}
}
.top-actions {
  margin: 16rpx 20rpx 0 20rpx;
  display: flex;
  gap: 20rpx;
}

.action-card {
  flex: 1;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.action-card.primary {
  background: #C02C38;
  color: #fff;
}

.action-icon-bg {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  border: 1rpx solid #e8e8e8;
}

.action-card.primary .action-icon-bg {
  background: rgba(255, 255, 255, 0.15);
}

.action-icon {
  width: 56rpx;
  height: 56rpx;
}

.action-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-title {
  font-size: 28rpx;
  font-weight: 600;
}

.action-sub {
  font-size: 22rpx;
  opacity: 0.8;
  margin-top: 4rpx;
}

.section-title {
  padding: 20rpx 20rpx 0 20rpx;
}

.name {
  font-size: 34rpx;
  font-weight: 700;
}

.addr-text {
  font-size: 24rpx;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price {
  color: #C02C38;
  font-size: 32rpx;
  font-weight: 700;
}

.lease-area {
  color: #666;
  font-size: 24rpx;
}

.card {
  background: #ffffff;
  margin: 16rpx 20rpx 0 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content:flex-start;
  margin-bottom: 16rpx;
}

.card-header.header-link .link {
  color: #C02C38;
  font-size: 24rpx;
}
.addr-row {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
  color: #666;
}

.addr-icon {
  width: 18rpx;
  height: 25rpx;
  margin-right: 8rpx;
  object-fit: contain !important;
}
.card-title {
  font-size: 28rpx;
  font-weight: 700;
}

.grid {
  display: grid;
  gap: 16rpx;
}

.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border: 1rpx solid #e8e8e8;
}

.appointment-form {
  // margin: 20rpx;
}

.grid-label {
  color: #888;
  font-size: 24rpx;
}

.grid-value {
  margin-top: 6rpx;
  font-size: 28rpx;
  font-weight: 600;
}

.vr-preview {
  position: relative;
  height: 420rpx;
  width: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  // background-image: url(detail.thumbnail);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vr-cover {

  width: auto;
  height: 100%;
  display: flex;
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  // padding: 10rpx 16rpx;
}

/* 修改 vr-badge 居中到 vr-preview 中心 */
.vr-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.vr-badge-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 8rpx;
}

.vr-badge-text {
  color: #fff;
  font-size: 24rpx;
}

.vr-hint {  
  color: #fff;
  padding: 8rpx 12rpx;
  font-size: 24rpx;
}

.vr-support {
  color: #666;
  font-size: 22rpx;
}
.vr-tips {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.vr-tips-icon {
  width: 20rpx;
  height: 20rpx;
  margin-right: 8rpx;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.detail-item {
  background: #fafafa;
  border-radius: 12rpx;
  padding: 20rpx;
}

.detail-label {
  color: #888;
  font-size: 24rpx;
}

.detail-value {
  margin-top: 6rpx;
  font-size: 28rpx;
  font-weight: 600;
}

.feature-list,
.service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx 24rpx;
}

.feature-item,
.service-item {
  display: flex;
  align-items: center;
}

.check-icon {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #23c16b;
  margin-right: 10rpx;
  position: relative;
}

.check-icon::after {
  content: '';
  position: absolute;
  left: 6rpx;
  top: 2rpx;
  width: 6rpx;
  height: 12rpx;
  border: 4rpx solid #fff;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
}

.check-icon.red {
  background: #C02C38;
}

.feature-text,
.service-text {
  font-size: 26rpx;
}

.safety-grid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.safety-grid-left {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  flex: 1;
}

.safety-grid-right {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  flex: 1;
}

.safety-label {
  color: #888;
  font-size: 24rpx;
}

.safety-value {
  margin-top: 6rpx;
  font-size: 28rpx;
  font-weight: 600;
}

/* .address-block { } */
.address-main {
  font-size: 26rpx;
}

.distance-list {
  margin-top: 12rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  color: #666;
  font-size: 20rpx;
}

/* .distance-item { } */
</style>
